<template>
  <div id="app">
    <!-- 访问 state 中的数据 -->
    <!-- <h1>根组件 {{ $store.state.count }}</h1> -->
    <h1>根组件 {{ count }}</h1>
    <input v-model="$store.state.count" type="text">
    <add-item></add-item>
    <hr>
    <sub-item></sub-item>
  </div>
</template>

<script>
import AddItem from './components/add-item.vue'
import SubItem from './components/sub-item.vue'
import { mapState } from 'vuex'

// function getP() {
//   return {
//     name: '阿田',
//     age: 18,
//     fn() {}
//   }
// }

// const obj = {
//   // 相当于把函数调用的结果展开了
//   ...getP()
// }

// console.log(obj)

// mapState 方法需要传入一个数组
// 返回值是一个对象, 对象中会存储你传入的数据对应的一个函数
// 我们只需要调用 mapState 将其结果在 computed 中展开
// 即可实现快速访问 state 的数据
// const result = mapState(['count'])

// const computed = {
//   ...mapState(['count'])
// }
// console.log(result, computed)


export default {
  name: 'app',
  data: function () {
    return {
      
    }
  },
  components: {
    AddItem,
    SubItem
  },
  computed: {
    // 假如有很多这样的共享数据都要使用
    // 每次都写计算属性会很麻烦
    // 所以, Vuex 给我们提供了一个叫辅助函数的东西
    // 它帮我们写计算属性
    // count() {
    //   return this.$store.state.count
    // }
    // mapState 辅助函数的使用步骤
    // 1. 导入辅助函数
    // 2. 在计算属性中调用并展开结果
    ...mapState(['count'])
  }
}
</script>

<style>
#app {
  width: 600px;
  margin: 20px auto;
  border: 3px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}
</style>